<!--
 * @Descripttion: 
 * @version: 
 * @Author: hejin.gao
 * @Date: 2022-09-21 09:52:13
 * @LastEditors: hejin.gao
 * @LastEditTime: 2022-09-21 13:52:07
-->
<template>
  <div>
    <div class="tool">
      <el-tooltip effect="dark" content="锁定模型" placement="top">
        <div class="item" :class="{ active: lockView }" @click="handleLockView">
          <i class="iconfont icon-view"></i>
        </div>
      </el-tooltip>
      <!-- <el-tooltip effect="dark" content="模型浏览" placement="top">
        <div class="item" :class="{ active: floor }" @click="changeFloor">
          <i class="iconfont icon-moxing"></i>
        </div>
      </el-tooltip> -->
      <el-tooltip effect="dark" content="上下刨切" placement="top">
        <div class="item" :class="{ active: clipping && direction == 1 }" style="transform:rotate(90deg)" @click="handleClipping(1)">
          <i class="iconfont icon-pouqie"></i>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="前后刨切" placement="top">
        <div class="item" :class="{ active: clipping && direction == 2 }"  style="transform:rotate(-90deg)" @click="handleClipping(2)">
          <i class="iconfont icon-pouqie"></i>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="左右刨切" placement="top">
        <div class="item" :class="{ active: clipping && direction == 3 }"  style="transform:rotate(180deg)" @click="handleClipping(3)">
          <i class="iconfont icon-pouqie"></i>
        </div>
      </el-tooltip>
      <el-tooltip v-if="clipping" effect="dark" content="刨切面" placement="top">
        <div class="item" :class="{ active: planeVisible }" @click="changePlaneVisible">
          <i class="el-icon-minus"></i>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="属性" placement="top">
        <div class="item" :class="{ active: propertyVisible }" @click="toggleInfoBox">
          <i class="iconfont icon-shuxing"></i>
        </div>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    this.direction = null;
    this.tilesetLoader = null;
    return {
      lockView: false,
      clipping: false,
      planeVisible: true,
      propertyVisible: true,
    };
  },
  mounted() {
    let object = earth.objectsManager.objectList.find(
      (ele) => ele.type == "bim" && this.objectIds.includes(ele.id)
    );
    this.tilesetLoader = object?.value;
    // 弹窗
    this.tilesetLoader.infoBox.popover([], true);
  },
  destroyed () {
    this.tilesetLoader.infoBox.enable = false;
  },
  computed: {
    ...mapState("layer", ["objectIds"]),
  },
  methods: {
    changePlaneVisible() {
      this.planeVisible = !this.planeVisible;
      this.tilesetLoader.clipping.clippingVisible = this.planeVisible;
    },
    // 刨切
    handleClipping(direction) {
      this.clipping = direction == this.direction ? false : true;
      this.direction = this.clipping ? direction : null;
      if (this.clipping) {
        this.tilesetLoader.clipping.draw(direction);
      } else {
        this.tilesetLoader.clipping.clippingEnabled = false;
        this.tilesetLoader.clipping.clippingVisible = false;
      }
    },
    //属性
    toggleInfoBox() {
      this.propertyVisible = !this.propertyVisible;
      this.tilesetLoader.infoBox.enable = this.propertyVisible;
    },
    //锁定视角
    handleLockView() {
      let me = this;
      me.lockView = !me.lockView;
      if (me.lockView) {
        this.tilesetLoader.flyTo();
        setTimeout(() => {
          viewer.camera.lookAt(this.tilesetLoader.tileset.boundingSphere.center);
        })
      } else {
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.block {
  z-index: 96;
  position: absolute;
  top: -40px;
}
</style>